<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Pan Card Tampering</title>

  <!-- CSS  -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <link href="./static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>

<body>
  <nav style="background-color: #5e72e4" class="lighten-1"  role="navigation" style="height: 100px">
    <div class="nav-wrapper container">
      <a id="logo-container" class="brand-logo center"><h5>Watermarking App</h5></a>
      <div style="margin-left: 800px">
      	   Made by <a class="orange-text text-lighten-3">Pianalytix</a>
      </div>
    </div>
  </nav>


  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <div class="row">
        <form action='/' method="post" class="col s12" enctype="multipart/form-data">
          <div class="row">

            <div class="input-field col s5" style="margin-left: 20px; margin-top: 50px">
              <div class = "row">

                  <div class="row">
                    <label for="first_name"><b>Upload Image to watermark</b></label><br>
                    <div class = "file-field input-field">
                      <div class = "btn" style="background-color: #5e72e4">
                        <span>Browse</span>
                        <input type = "file" name="image_upload" id="image_upload" />
                      </div>
                      <div class = "file-path-wrapper">
                        <input class = "file-path validate" type = "text" placeholder = "Upload Image" name="image_name" id="image_name" />
                      </div>
                    </div>                    
                  </div>
                  
                  <div class="row" id="imagebox">
                    <label for="first_name"><b>Upload logo to watermark</b></label><br>
                    <div class = "file-field input-field">
                      <div class = "btn" style="background-color: #5e72e4">
                        <span>Browse</span>
                        <input type = "file" name="logo_upload" id="logo_upload" />
                      </div>
                      <div class = "file-path-wrapper">
                        <input class = "file-path validate" type = "text" placeholder = "Upload Logo" name="file_name" id="file_name" />
                      </div>
                    </div>                    
                  </div>

                  <div class="row">
                    <div id="textboxes">
                      <div class="input-field col s12">
                        <input placeholder="Placeholder" id="text_mark" name="text_mark" type="text">
                        <label for="first_name"><b>Text to watermark</b></label>
                      </div>
                    </div>                    
                  </div>

                  <fieldset id="radiofield" style="border: none;">
                    <label>
                      <input id="logo_watermark" name="options" type="radio" value="logo_watermark" checked />
                      <span>Logo Watermark</span>
                    </label>
                    <label style="margin-left: 70px">
                      <input id="text_watermark" name="options" type="radio" value="text_watermark"/>
                      <span>Text Watermark</span>
                    </label>
                  </fieldset>
        
                  <div class="row center" style="margin-top: 50px">
                    <button id="submit" type="submit" class="btn-large" style="background-color: #5e72e4">Check</button>
                  </div>

              </div>
            </div>

            <div class="input-field col s3">
              <div style="text-align: center; padding-top: 50px; margin-left: 100px">
                <img src='{{ full_filename }}' width="500" height="300">
              </div>
            </div>

          </div>
        </form>
      </div>
    </div>
  </div>

  </div>
  </div>

  <!--  Scripts-->
  <script src="./static/js/materialize.js"></script>
  <script type="text/javascript">
    var imagebox = document.getElementById('imagebox');
    var textbox = document.getElementById('textboxes');
    

    textbox.style.display = "none";
    document.getElementById('image_upload').onchange = function () {
        document.getElementById('image_name').value = this.value.slice(12,100);
    };
    document.getElementById('logo_upload').onchange = function () {
        document.getElementById('logo_name').value = this.value.slice(12,100);
    };

    document.getElementById('radiofield').onchange = function () {
      if(document.getElementById('logo_watermark').checked) {
        textbox.style.display = "none";
        imagebox.style.display = "block";
      }else if(document.getElementById('text_watermark').checked) {
        textbox.style.display = "block";
        imagebox.style.display = "none";
      }
    };


  </script>

  </body>
</html>

